<template>
	<view>
	<scroll-view class="container" scroll-y style="margin:auto;width:100%;height:700px;">
		
		<swiper autoplay="true" indicator-dots="true" indicator-active-color="#ffffff"
		class="swiper" >
			  <swiper-item v-for="(item,index) in imgUrls" :key="index">
				  <image :src="item.img_url"  />
			  </swiper-item>
		</swiper>
		
		<view style="display: none;" class="notify-bar flex-wrap flex-direction-row">
			<image src="../../static/my/xiaoxitishi.png"></image>
			<view class="text">关于易地扶贫项目的新通知!</view>
		</view>
		<!-- 
			1、首页展示社区的轮播图片
			2、首页展示社区的最新通知
			3、展示近一月的工作量(新增了多少条数据，更新了多少条数据，柱状图)
			4、展示网格员管理的户信息以及企业信息情况（表格）
			5、
		-->
		<view class="container" style="margin-top:10px;">
			<label style="font-size:32rpx;color:#666;">您好，欢迎来到智慧社区管理平台</label>
		</view>
		
		<view class="container" style="margin-top:10px;">
			<view class = "analyze-button-box">
				<view id="byFamily" @tap="changeTab" :class="['not-selected',{selected:infoTab==='family'}]"
				class="analyze-button-text left-r">户信息</view>
				<view id="byCompany" @tap="changeTab" :class="['not-selected',{selected:infoTab==='company'}]"
				class="analyze-button-text  right-r">企业信息</view>
			</view>
			<view v-show="infoTab=='family'" style="margin-top:20px;">
				<view class="table-sd">				
					<view class="row">
						<view class="td"><label>所辖区域：</label></view>
						<view class="td"><label>龙头社区</label></view>
						<view class="td"><label>所辖户数：</label></view>
						<view class="td-last"><label>{{family.total}}</label></view>
					</view>
					<view class="row-last">
						<view class="td"><label>已采集数：</label></view>
						<view class="td"><label>{{family.done}}</label></view>
						<view class="td"><label>待采集数：</label></view>
						<view class="td-last"><label>{{family.undone}}</label></view>
					</view>		
				</view>
			</view>
			<view v-show="infoTab=='company'" style="margin-top:20px;">
				<view class="table-sd">				
					<view class="row">
						<view class="td"><label>所辖区域：</label></view>
						<view class="td"><label>龙头社区</label></view>
						<view class="td"><label>企业数：</label></view>
						<view class="td-last"><label>{{company.total}}</label></view>
					</view>
					<view class="row-last">
						<view class="td"><label>已采集数：</label></view>
						<view class="td"><label>{{company.done}}</label></view>
						<view class="td"><label>待采集数：</label></view>
						<view class="td-last"><label>{{company.undone}}</label></view>
					</view>		
				</view>
			</view>
		</view>
			
		
		<view class="container" style="margin-top:20px;height:460upx;">			
			<event-legend :titleRed="red" :titleBlue="blue"></event-legend>
			<canvas style="margin-left:0px;" canvas-id="canvasLineA" 
				id="canvasLineA" @touchstart="touchLineA"></canvas>	
		</view>
		
		<view class="container" style="margin-top:10px;">
			<view style="border-bottom: 1px solid #f7f7f7;width:100%;">
				<label style="font-weight:bold;font-size:14px;line-height:30px;">工作记录</label>
			</view>
			<view class="item" style="font-size:13px;line-height:36px;">				
				<view v-for="item in workRecords" style="border-bottom:1px solid #f7f7f7;">
					<label>
						{{item.create_at}}{{dictValue.opttype[item.type]}}了一条{{item.info}}
						(<label style="color:#333">#{{item.no}}</label>)
					</label>
				</view>
				<view v-if="workRecords.length==0">
					<label>暂无工作记录</label>
				</view>
			</view>
		</view>
			
		<view style="margin-top:30px;">
				  <view class="support">毅邦科技提供技术支持</view>
				</view>
	</scroll-view>
	
</view>
</template>

<script>
	import uCharts from '../../static/u-charts/u-charts/u-charts.js';
	import eventLegend from '../../common/eventLegend.vue';
	import common from '../../common/common.js'
	const serverAddr = common.serverAddr	
	var canvaLineA=null
	export default {
		data() {
			return {
				dictValue: common.dictValue,		
				title: "近24小时",
				red: "本月新增量",
				blue: "本月更新量",
				infoTab: "family",
				sensor:{L5:10,L10:20,L50:30,L90:11,L95:22},
				  postUp: '27',
				    postDown: '53',
				    imgUrls: [
						{img_url: "https://staticimg.weikedashi.net/zhsq_bg2.png"},
						{img_url: "http://www.leishan.gov.cn/syqt/banner/images/P020191230542169425864.jpg"},
					],
				    middle1: serverAddr+"/cgt/front/middle1.png?time="+Date.parse(new Date()),
					middle2: serverAddr+"/cgt/front/middle2.png?time="+Date.parse(new Date()),
					middle3: serverAddr+"/cgt/front/middle3.png?time="+Date.parse(new Date()),
				    categorys: [
				      {imageURL: serverAddr+ '/cgt/vagetable.jpg', text:'蔬菜水果', url:'0'},
				    {imageURL: serverAddr+ '/cgt/meat.jpg', text:'鲜肉禽类', url:'1'},
				    {imageURL: serverAddr+ '/cgt/oil.jpg', text:'米面粮油', url:'2'},
				    {imageURL: serverAddr+ '/cgt/ham.jpg', text:'方便速食', url:'3'}
				  ],				  
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				workRecords:[],
				family:{total:0,done:0,undone:0},
				company:{total:0,done:0,undone:0},
				  chartData:{						
					  categories:['1月','2月','3月'],
					  series:[
							{
								name:"new",
								data:[12,15,10],
								color:'#C23531'
							},
							{
								name:"update",
								data:[2,15,10],
								color:'#2F4554'
							},
						]
				  }
			}
		},
		components:{
			eventLegend,
		},
		onLoad() {
			
			let that = this;			
			
			this.cWidth = uni.upx2px(690)
			this.cHeight = uni.upx2px(320)	
			this.wxLogin();
		},
		methods: {
			wxLogin(){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: ({ code }) => {
						if (code == '') {
							that.$uniApi.tipMsg("获取code失败");
							return
						}
						this.postLogin(code);
					}
				});
			},
			postLogin(code){
				let that = this;
				uni.showLoading({"title":"数据加载中..."});
				uni.request({
					url: this.$common.baseUrl + '/api/OauthController/loginByOpenid',
					data: { type: 'jswechat', code},
					success: res => {
						uni.hideLoading()
						let code = res.data["code"]
						if(code == 0){
							that.$uniApi.tipMsg(res.data['info']);
							uni.redirectTo({url:'/pages/my/login/login'})
							return;
						}else{							
							
							//that.$uniApi.tipMsg("登录成功")
							var userid = res.data.data;
							var cookieString = JSON.stringify(res.cookies[0])
							cookieString = cookieString.split(";")[0];
							var cookie = cookieString.slice(1);
							uni.setStorageSync('userid', userid);
							uni.setStorageSync('username', userid);
							uni.setStorageSync('cookie', cookie);
								
							that.getWorkRecord(cookie);			
							that.getUserData(cookie);			
							that.getUserInsights(cookie);			
						}
					}
				});			
			},
			getUserInsights(cookie) {
				var that = this;
				uni.request({
					url: this.$common.baseUrl + 'api/data/getUserInsights',
					data: {pageNum: 1},
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},
					method: 'GET',
					success: res => {
						console.log(res.data.data);
						console.log(res.data.data);		
						let insights = res.data.data;
						that.chartData.categories = insights.category;
						that.chartData.series[0].data = insights.new;
						that.chartData.series[1].data = insights.update;
						that.showLineA("canvasLineA", that.chartData);
					},
					fail: err => {
						console.log("出错了");
					}
				})
			},
			getUserData(cookie) {
				var that = this;
				uni.request({
					url: this.$common.baseUrl + 'api/data/getUserData',
					data: {pageNum: 1},
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},
					method: 'GET',
					success: res => {
						console.log(res.data.data);
						console.log(res.data.data);
						let family = res.data.data.family;
						for(var i=0; i<family.length; i++){
							if(family[i].collection_status==2){
								that.family.done = family[i].total;
							}else{
								that.family.undone = family[i].total;
							}
							that.family.total += family[i].total;
						}
						let company = res.data.data.company;
						for(var i=0; i<company.length; i++){
							if(company[i].collection_status==2){
								that.company.done = company[i].total;
							}else{
								that.company.undone = company[i].total;
							}
							that.company.total += company[i].total;
						}
					},
					fail: err => {
						console.log("出错了");
					}
				})
			},
			getWorkRecord(cookie) {
				var that = this;
				uni.request({
					url: this.$common.baseUrl + 'api/data/getWorkRecordIndex',
					data: {pageNum: 1},
					header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},
					method: 'GET',
					success: res => {
						console.log(res.data.data)
						that.workRecords = res.data.data.data;
						console.log(that.workRecords)
					},
					fail: err => {
			
					}
				})
			},
			changeTab(e){
				if(e.currentTarget.id == 'byFamily'){
					this.infoTab = "family";
				}else{
					this.infoTab = "company";
				}
			},
			
			showLineA(canvasId, chartData) {
				var _self = this;
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 10,
					legend: { show: false },
					dataLabel: false,
					dataPointShape: false,
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						axisLine: false,
						labelCount: 4,
					},
					yAxis: {		
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 5,
						splitNumber: 5,
						data: [{min:2,max:20,title:'%        ',axisLine: false,}],
						showTitle: true
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
				});
			}, //折线
									
			touchLineA(e) {  // 点击折线
			// console.log(e)
				let that = this
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						console.log(item)
						if(item.name=="new"){
							return category + '新增数据' + item.data+"条";
						}else{
							return category + '更新数据' + item.data+"条";
						}
					}
				});
			}			
			
		}
	}
</script>

<style>
@import url("index.css");
.charts {
		width: 100%;
		height: 460upx;
		background-color: #ffffff;
	}
		
	/* 分区背景颜色与圆角设置 */
	view.container{
		width: 710upx; /* 750 - 20*2 - 20*2 */
		margin-bottom: 20upx;
		background-color: #FFFFFF;
		border-radius: 4px;
		padding: 20upx 20upx 20upx 20upx;
		margin:0 auto;
		height: auto;
		/* padding-bottom: 20upx; */
		/* padding-left: 15upx; */
		/* padding-right: 15upx; */
	}
	
	/* 刘昊部分使用 工点监测页和传感器监测页*/
	.container-plus{
			width: (750-64-40)upx; 
			margin:0px 20upx 20upx 20upx; 
			background-color: #FFFFFF;
			border-radius: 4px;
			padding: 38upx 32upx 40upx 32upx;
		}
	
	.analyze-button-box{
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
	}
	.analyze-button-text{
		width: 0px;
		height: 48px;
		flex: 1;
		font-size: 16px;
		text-align: center;
		font-family: Helvetica;
		line-height: 48px;
		width: 112upx;
	}
	.left-r{
		border-top-left-radius: 4px;
	}
	.right-r{
		border-top-right-radius: 4px;
	}
	.selected{
		background-color: #FFFFFF !important;
		color: #68B92E !important;
	}
	.not-selected{
		color: #7F7F7F;
		background-color: #F9F9F9;
	}
	
	.table-sd{
			color:#666;
			text-align:center;border:1px solid #f7f7f7;font-size:28upx;margin:0 auto;width:100%;
		}
		.table-sd .row{
			border-bottom:1px solid #f7f7f7;display:flex;flex-direction:row;line-height:30px;
		}
		.table-sd .row-last{
			display:flex;flex-direction:row;line-height:30px;
		}
		.table-sd .row .td, .table-sd .row-last .td{
			border-right:1px solid #f7f7f7;flex:1;
		}
		.table-sd .row .td-last, .table-sd .row-last .td-last{
			flex:1;
		}
	.title {
		height: 40rpx;
		width: 10rpx;
		background-color: #68B92E;
		margin: 20rpx 0 20rpx 20rpx;
	}
	
	.icon-title {
		display: block;
		line-height: 100rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}	
</style>
